<template>
	<div class="ban">
		<!-- 隐藏菜单 -->
		<div :class="[{'default':show},'slider']">
			<p>
				<router-link to="/">登录</router-link>/<router-link to="/">注册</router-link>
			</p>
			<form>
				<i class="iconfont">&#xe86e;</i>
				<input type="text" />
			</form>
			<ul>
				<li v-for="it in menus" :key="it.id">
					<router-link :to="it.url">{{it.name}}</router-link>
				</li>
			</ul>
		</div>
		<!-- 主界面 -->
		<div class="main">
			<!-- 顶部 -->
			<div class="top">
				<!-- 城市 -->
				<div class="city">
					<router-link to="/city">
						<label>{{cityname}}</label><i class="iconfont">&#xe600;</i>
					</router-link>
				</div>
				<!-- 搜索 -->
				<form class="search">
					<i class="iconfont">&#xe86e;</i>
					<input type="text" />
				</form>
				<!-- 导航 -->
				<div class="btn">
					<i class="iconfont" @click="getshow()">&#xe790;</i>
				</div>
			</div>
			<!-- 图 -->
			<div class="swiper b-swiper">
			    <ul class="swiper-wrapper">
			        <li class="swiper-slide" v-for="it in imglist" :key="it.id">
						<img :src="it.url" />
					</li>
			    </ul>
			    <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
			</div>
		</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	import {onMounted} from 'vue'
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper'
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	export default{
		name:'Banner',
		props:['propsbanner'],
		computed:{
			...mapState(['cityname'])
		},
		setup(){
			onMounted(()=>{
				new Swiper('.b-swiper',{
					//循环播放
					loop:true,
					//设置分页器效果
					pagination:{
						el:'.swiper-pagination'
					},
					//设置播放项：时间，不停止，手指
					autoplay:{
						delay:3000,
						stopOnLastSlide:false,
						disableOnInteraction:false
					}
					
				})
			})
		},
		data(){
			return{
				menus : [],show:false,
				imglist:[
					{ id:1 , url:require('../../../assets/img/1.jpg')},
					{ id:2 , url:require('../../../assets/img/2.jpg')},
					{ id:3 , url:require('../../../assets/img/3.jpg')},
					{ id:4 , url:require('../../../assets/img/4.jpg')},
					{ id:5 , url:require('../../../assets/img/5.jpg')},
				]
			}
		},
		methods:{
			getshow(){
				this.show=!this.show
			}
		},
		watch:{
			propsbanner(){
				this.menus=this.propsbanner
			}
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: white;
	}
	.slider{
		position: absolute;
		left: -6rem;
		top: 0;
		z-index: 6;
		height: 100%;
		width: 6rem;
		background: rgba(62,62,62,0.9);
	}
	.slider a{
		text-decoration: none;
		color: #FFFFFF;
		margin: 0.05rem;
	}
	.slider p{
		line-height: 0.6rem;
		text-align: right;
		padding-right: 0.3rem;
		color: white;
		font-size: 0.5rem;
		margin: 0.5rem;
	}
	.slider ul{
		margin: 0.5rem auto 0;
		width: 95%;
	}
	.slider li{
		line-height: 1.3rem;
		text-align: left;
		text-indent: 1rem;
		font-size: 0.5rem;
		border-top: 0.04rem solid black;
	}
	.slider i{
		display: inline-block;
	}
	.slider input{
		border: 0;
		width: 80%;
		line-height: 0.6rem;
		text-indent: 0.8rem;
	}
	.default{
		left: 0;
		transition: all 1s;
	}
	
	.main{
		position: relative;
		width: 100%;
		height: 3rem;
	}
	.top{
		position: absolute;
		left: 0;
		top: 0.1rem;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 1.5rem;
	}
	.city{
		font-size: 0.4rem;
		line-height: 0.4rem;
		padding-left: 0.25rem;
		padding-right: 0.1rem;
		font-weight: bold;
	}
	.city i{
		vertical-align: middle;
		padding-left: 0.1rem;
	}
	.search{
		flex: 1;
		background: white;
		border-radius: 0.1rem;
		overflow: hidden;
		line-height: 0.1rem;
	}
	.search i{
		display: inline-block;
	}
	.search input{
		border: 0;
		width: 80%;
		line-height: 0.4rem;
		text-indent: 0.8rem;
	}
	.main i{
		margin: 0.3rem;
		font-size: 0.5rem;
		font-weight: bold;
		color: white;
	}

	.b-swiper{
		width: 100%;
		height: 7rem;
	}
	.b-swiper img{
		width: 100%;
		height: 100%;
	}
	.swiper-pagination >>> .swiper-pagination-bullet-active{
		background: yellow;
	}
</style>
